<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 50rpx;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		z-index: 999;
	}

	.top {
		padding: 20rpx 30rpx;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;
		line-height: 60rpx;
		position: relative;

		.line {
			width: 100%;

			.f28 {
				width: 50%;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 520rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.lbtn {
		margin: 60rpx auto;
	}

	.h1 {
		border-left: 6rpx solid #409eff;
		padding: 0 20rpx;
		transform: translateX(-20rpx);
		height: 40rpx;
		line-height: 40rpx;
	}

	.tip {
		width: 140rpx;
	}

	.clock {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.paybtn {
		width: 128rpx;
		height: 64rpx;
		border: 2rpx solid #409eff;
		border-radius: 34rpx;
		font-size: 28rpx;
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;

		.btn {
			width: 690rpx;
			height: 88rpx;
			opacity: 1;
			background: #ffffff;
			border: 2rpx solid #409eff;
			border-radius: 46rpx;
			margin: 30rpx;
		}
	}

	.header {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}
</style>

<template>
	<view class="content">
		<view class="nav bgwhite" id="nav">
			<u-tabs :list="nav" :is-scroll="false" bar-width="60" bar-height="4" :current="current" @change="change">
			</u-tabs>
		</view>
		<view :style="'height:'+navheight+'px;'"></view>
		<view v-if="current==0">
			<view class="box" v-for="item,index in list" :key="index" :style="item.quoteId==1?'background:#dee2ee;':''">

				<view class="between-flex m-bottom10 f28">
					<view class="textColor bold">{{item.indexNum}}</view>
					<view class="textColor bold" v-if="item.quoteId==1">引用数据</view>
					<view class="textColor bold" v-else-if="item.totalProgress==100">已完成</view>
					<view v-else-if="item.endTime" class="textColor bold">{{isEnd(item)?'已超期':'未超期'}}</view>
				</view>
				<u-line></u-line>
				<view class="f34 bold textColor">{{item.name}}</view>
				<view class="gray  align-flex">
					<view class="m-right30">负责人</view>
					<view class="textColor ">{{item.principal | users}}</view>
				</view>
				<view class="gray  align-flex" v-if="item.users">
					<view class="m-right30">参与人 </view>
					<view class="textColor ">{{item.users}}</view>
				</view>
				<view class="gray  align-flex">
					<view class="m-right30">任务进度 </view>
					<view class="textColor ">{{item.totalProgress}}%</view>
				</view>
				<view class="gray  align-flex" v-if="item.endTime">
					<view class="m-right30">要求完成日期 </view>
					<view class="textColor ">{{item.endTime}}</view>
				</view>
				<view class="paybtn center-flex blue" @click="job=item;showDispose=true"
					v-if="showbtn(item)">
					处理
				</view>
			</view>

		</view>
		<view v-if="current==1">
			<view class="header between-flex m-top30 f28">
				<view>创建人:{{info.createUser | user}}</view>
				<view>创建时间:{{info.createTime}}</view>
			</view>

			<view class="box ">
				<view class="between-flex m-bottom20">
					<view class="f28 h1 bold textColor">基本信息</view>
					<view class="clock align-flex blue f24" @click="showHistory=true">
						<image src="../../static/images/clock.png" mode=""></image>
						历史流程
					</view>
				</view>

				<u-line></u-line>
				<view class="gray align-flex ">
					<view class="tip">项目编号</view>
					<view class="textColor ">{{info.itemCode}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">项目名称</view>
					<view class="textColor ">{{info.title}}</view>
				</view>
				<view class="gray  align-flex " v-if="info.planUse">
					<view class="tip">合同金额</view>
					<view class="textColor ">￥{{info.planUse}}</view>
				</view>
				<view class="gray  align-flex ">
					<view class="tip">负责人</view>
					<view class="textColor ">{{info.principal | users}}</view>
				</view>
				<view class="gray  align-flex ">
					<view class="tip">参与人</view>
					<view class="textColor ">{{info.users}}</view>
				</view>
				<view class="gray  align-flex ">
					<view class="tip">开始时间</view>
					<view class="textColor ">{{info.startTime}}</view>
				</view>
				<view class="gray  align-flex ">
					<view class="tip">结束时间</view>
					<view class="textColor ">{{info.endTime}}</view>
				</view>
				<view class="gray  align-flex " v-if="info.priority">
					<view class="tip">紧急程度</view>
					<view class="textColor ">{{info.priority | itemLevel}}</view>
				</view>
				<view class="gray  align-flex " v-if="info.projectLevel">
					<view class="tip">项目级别</view>
					<view class="textColor ">{{info.projectLevel | itemProjectLevel}}</view>
				</view>
			</view>

		</view>

		<u-popup mode="bottom" v-model="showDispose" :closeable="true" borderRadius="20">
			<dispose v-if="showDispose" :job="job" @submit="showDispose=false;getInfo()"></dispose>
		</u-popup>
		<u-popup mode="bottom" v-model="showHistory" :closeable="true" borderRadius="20">
			<history v-if="showHistory" title="历史流程" :process="process"></history>
		</u-popup>

	</view>
</template>

<script>
	import dispose from '@/pagesProject/operation/dispose.vue'
	import history from '@/pagesProject/operation/history.vue'
	export default {
		components: {
			dispose,
			history
		},
		data() {
			return {
				head: this.$head,
				navheight: 0,
				nav: [{
						name: '任务信息'
					}, {
						name: '项目详情'

					}

				],
				itemCode: 0,
				current: 0,
				showDispose: false,
				showHistory: false,
				info: {},
				work: [],
				process: [],
				job: {},
				orignlist: [],
				donelist: [],
				list:[]
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				let info = uni.createSelectorQuery().select("#nav");
				info.boundingClientRect((data) => {

					this.navheight = data.height

					console.log(this.navheight)
				}).exec()

			})
			this.itemCode = e.itemCode
			this.getInfo()

		},
		methods: {
			showbtn(item){
				if(item.quoteId==0&&!item.hasOwnProperty('children')&&item.totalProgress!=100&&!this.isParent(item.indexNum)&&this.isMe(item)){
					return true
				}else{
					return false
				}
			},
			change(index) {
				this.current = index;

			},
			getInfo() {

				this.$pop.ajaxPost('/busItemInfo/getWorkDetail', {
					itemCode: this.itemCode
				}).then(res => {
					if (res.code == 0) {
						this.info = res.body.info
						this.work = res.body.work
						this.process = res.body.process
						this.process.reverse()
						this.orignlist = this.$u.deepClone(this.work)
						var arr = []
						this.orignlist.forEach(item => {
							if (!item.parentId) {
								arr.push(item)
							}
						})
						arr.forEach(item => {
							this.arr2tree(this.orignlist, item)
						})
						this.donelist = this.orignlist
						var list=this.flatten(this.donelist)
						this.list=list
						console.log(this.list)
					}
				})

			},
			arr2tree(arr, father) {
				// 遍历数组，找到当前father的所有子节点
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].parentId == father.id) {
						// 这里是有子节点才需要有children属性（也就是说有children里绝不会为空list）
						if (!father.children) {
							father.children = [];
						}
						var son = arr[i];
						father.children.push(son);
						arr.splice(i, 1); // 删除该节点，当list为空的时候就终止递归
						i--; // 由于删除了i节点，所以下次访问的元素下标应该还是i
					}
				}
				// 再对每一个子节点进行如上操作
				if (father.children) { // 需要先判断有没有子节点
					var childs = father.children;
					for (var i = 0; i < childs.length; i++) {
						this.arr2tree(arr, childs[i]); // 调用递归函数
					}
					// 用于按名称进行排序，如果不强调顺序可以去掉
					father.children.sort(function(a, b) {
						return a.name > b.name;
					})
				}
			},
			flatten(arr, level) {
				var result = [],

					recursion = function(arr, level) {
						arr.level = arr.level || level || 0;

						//这里用了个巧妙的方法，记录该数组的level。有就用它自己的，没有就判断是不是别人给它的，别人给的一般代表自己是子树。然后给的时候 +1

						arr.forEach(function(item) {
							item.$$treeLevel = arr.level;

							result.push(item);

							item.children && recursion(item.children, arr.level + 1);

						});

						delete arr.level;

					};

				recursion(arr);

				return result;

			},
			
			isEnd(item) {
				if (item.endTime) {
					var endTime = item.endTime.replace(/-/g, '/');
					endTime = (new Date(endTime).getTime())
					var nowTime = new Date().getTime()
					console.log(endTime - nowTime)
					if (nowTime < endTime) {
						return false
					} else {
						return true
					}
				} else {
					return false
				}



			},
			isParent(indexNum){
				var indexNum=indexNum.split('.')
				if(indexNum.length==1){
					return true
				}else{
					return false
				}
			},
			isMe(item){
				var user=this.$getUser()
				console.log(user)
				if(item.principal==user.id){
					return true
				}else{
					return false
				}
			},

		}
	}
</script>
